<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-24 16:33:27
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-14 12:59:58
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamNoticeBoard/peopleOverView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col gap-4 px-2">
    <!--    展示系统标签下拉-->
    <ChartContainer title="任务达成情况" :subtitle="`达标值：${taskStandardScore}%`">
      <BarChart2 :data="barData" />
    </ChartContainer>

    <ChartContainer title="任务达成详情" subtitle="点击饼图图例可跳转查看沟通详情">
      <template v-if="circleData">
        <CircleChart :data="circleData" />
      </template>
    </ChartContainer>

    <scoreTable
      :memberBoardList="[currentMemberInfo]"
      :isTeam="false"
      :enableFilter="false"
      :enableSort="false"
    />
  </div>
</template>

<script setup>
import scoreTable from "@/views/myXmate/components/scoreTable.vue";
import BarChart2 from "@/components/charts/bar2Chart.vue";
import CircleChart from "@/components/charts/circleChart.vue";
import ChartContainer from "@/views/myXmate/myTeam/teamNoticeBoard/visitSituation/chartContainer.vue";
import { getSalesAbilityScoreAPI } from "@/services/myXmate";
import { useMyXmateStore } from "@/store";
import { defineProps, computed, onMounted, inject, ref } from "vue";

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  ssoUserId: {
    type: String,
    required: true,
  },
});
const actions = computed(() => {
  return myXmateStore.systemTags.map((v) => {
    return {
      text: v.label,
      id: v.id,
    };
  });
});
const myXmateStore = useMyXmateStore();
const currentSystemTag = ref(actions.value[0]);
const showPopover = ref(false);

async function onSelect(v) {
  console.log("onSelect: ", v);
  currentSystemTag.value = v;
  showPopover.value = false;
  await getBarData();
}

const teamId = inject("teamNoticeBoard/teamId");
const periodType = inject("teamNoticeBoard/periodType");

const barData = ref([]);

const circleData = computed(() => {
  return [
    { name: "任务达成达标数", value: achievedCount.value, type: "completed" },
    { name: "任务未达标数", value: unAchievedCount.value, type: "uncompleted" },
  ];
});

onMounted(async () => {
  if (teamId.value && props.ssoUserId && periodType) {
    await getBarData();
  }
});

async function getBarData() {
  const data = await getSalesAbilityScoreAPI(
    teamId.value,
    props.ssoUserId,
    periodType,
    "COMPLETION",
    currentSystemTag.value?.id || null
  );
  barData.value = data.datas.map((item) => ({
    name: item.assessmentName,
    value: parseFloat(item.assessmentValue).toFixed(0),
  }));
  console.log("barData: ", barData.value);
}

const memberBoardList = computed(() => myXmateStore.memberBoardList);

const currentMemberInfo = computed(() => {
  return memberBoardList.value.find((item) => item.id === props.id) || {};
});

// 老逻辑
// const taskStandardScore = computed(() => {
//   return currentMemberInfo.value.taskStandardScore || 0;
// });

const taskStandardScore = computed(
  () => myXmateStore.noticeBoardPublicParam.taskStandardScore || 0
);

const achievedCount = computed(() => {
  return currentMemberInfo.value.taskCompletePassCount || 0;
});

const unAchievedCount = computed(() => {
  if (!currentMemberInfo.value.totalVisitCount) {
    return 0;
  }
  return Math.max(0, currentMemberInfo.value.totalVisitCount - achievedCount.value);
});
</script>

<style lang="less" scoped></style>
